<template lang="html">
  <div class="bor_bot mar_bot10">
        <div class="relate_recommend">
          <p class="title"><strong class="msqg"><img src="http://m.caissa.com.cn/static/images/qg.jpg"></strong>
          <a href="javascript:void(0);"><span>更多&nbsp;&nbsp;&gt;</span></a></p>
          <ul>
          <li><a @click="tobuy()" href="javascript:void(0);">
            <p class="pic"><img  :src="objdata.list[0].pic" >
              <strong class="pos">
              <i class="text">北京出发</i>
              <i class="ms"></i>
              </strong>
            </p>
            <div class="col_bg">
              <span class="text">{{objdata.list[0].name}}</span>
                <!-- <span class="text">{{objdata}}</span> -->
              <p class="label">
                <!-- <em>抢</em> -->
                <i v-for=" ite in objdata.list[0].lables.split(',')">{{ite}}</i>
              </p>
              <p class="price"><span>{{objdata.list[0].date}}出发</span>
              <strong class="pri"><i>¥</i><i class="num">{{objdata.list[0].price}}</i>起</strong>
              </p>
            </div>
            </a>
            </li>
            <li><a @click="tobuy()" href="javascript:void(0);">
            <p class="pic"><img :src="objdata.list[1].pic">
              <strong class="pos">
              <i class="text">北京出发</i>
              <i class="ms"></i>
              </strong>
            </p>
            <div class="col_bg">
              <span class="text">{{objdata.list[1].name}}</span>
              <p class="label">
                <i v-for=" ite in objdata.list[1].lables.split(',')">{{ite}}</i>
              </p>
              <p class="price"><span>{{objdata.list[1].date}}出发</span>
              <strong class="pri"><i>¥</i><i class="num">{{objdata.list[1].price}}</i>起</strong>
              </p>
            </div>
            </a>
            </li>

          </ul>
        </div>
      </div>
</template>

<script>
export default {
  props:['objdata'],
  data(){
    return {
      dataMore:this.objdata.list
    }
  },
  created(){
    console.log('11');
    console.log(this.objdata);
  },
  watch:{
    dataMore(newvalue,olevalue){
      console.log(newvalue);
      console.log(olevalue);
    }
  },
  methods:{
    tobuy(){
      this.$router.push({
        path:'/lion'
      })
    }
  }
}
</script>

<style lang="css">
.bor_bot {
  border-bottom: #e9e9e9 solid 1px;
  overflow: hidden;
}
.relate_recommend {
    padding: 5px 0px;
    background: #fff;
}
.relate_recommend p.title {
    display: block;
    overflow: hidden;
    padding: 2%;
}
.relate_recommend p.title strong, .glyx_box p.title strong {
    display: block;
    width: 50%;
    font-weight: normal;
    float: left;
}
body a {
    outline: none;
}
.relate_recommend p.title span, .glyx_box p.title span {
    display: block;
    font-size: 14px;
    width: 40%;
    color: #10b5ed;
    float: right;
    padding-right: 2%;
    text-align: right;
}
.relate_recommend ul {
    padding-left: 1%;
    overflow: hidden;
}
.relate_recommend ul li {
    width: 48%;
    padding: 0px 1%;
    margin-bottom: 10px;
    /*border-right: #eee solid 1px;*/
    float: left;
}
.relate_recommend ul li:nth-of-type(2){
  margin-left: 2.5%;
}
.relate_recommend ul li a {
    color: #333;
    display: block;
    overflow: hidden;
}
.relate_recommend ul li p.pic {
    height: 100px;
    overflow: hidden;
    position: relative;
}
.relate_recommend ul li p.pic img {
    height: 100px;
    border: none;
    vertical-align: middle;
    width: 100%;
}
.relate_recommend ul li p strong.pos {
    position: absolute;
    height: 24px;
    line-height: 24px;
    /*background: url(../images/filter.png) 0 0 repeat;*/
    width: 97%;
    bottom: 0px;
    left: 0px;
    color: #fff;
    font-weight: normal;
    padding-left: 3%;
}
.relate_recommend ul li p strong.pos i.text {
    display: inline-block;
    width: 54%;
    float: left;
    font-style: normal;
}
.relate_recommend ul li p strong.pos i.ms {
    display: inline-block;
    width: 46%;
    background: url(../../static/images/ms.png) right 0 no-repeat;
    background-size: 66px;
    height: 24px;
    font-style: normal;
}
.relate_recommend ul li .col_bg {
    background: #fff;
    padding: 4px;
}
.relate_recommend ul li span.text {
    display: block;
    height: 32px;
    line-height: 16px;
    overflow: hidden;
}
.relate_recommend ul li p.label{
    overflow: hidden;
    height: 22px;
    margin: 5px 0px 2px;
    height: 22px;
}
.relate_recommend ul li p.label i {

    display: inline-block;
    color: #0099a9;
    border: #0099a9 solid 1px;
    border-radius: 3px;
    padding: 0px 0.5rem;
    margin: 0px 2px 5px;
}
p.label i{
  font-style: normal;
}
.relate_recommend ul li p.price {
    text-align: right;
    padding: 0px 0.6rem;
}
.relate_recommend ul li p.price span {
    color: #999;
    width: 51%;
    line-height: 22px;
    text-align: left;
    float: left;
}

.relate_recommend ul li p.price strong.pri {
    color: rgb(255, 107, 1);
    font-weight: normal;
    font-size: 1.5rem;
    display: inline-block;
    width: 48%;
    font-style: normal;
}
</style>
